<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 300px;
            margin: 0 auto;
            margin-top: 30px;
            border: 5px solid red;
        }

        .task {
            display: flex;
            justify-content: space-around;
            margin: 10px 0;
        }

        .butn,
        .butns,
        .delete {
            width: 50px;
            height: 30px;
        }

        .todolist {
            width: 300px;
            margin: 0 auto;
            margin-top: 30px;
            border: 5px solid #000;
        }

        .task .butn {
            display: none;
        }

        p {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <input type="text" placeholder="请输入代办事项">
    <button class="butnes">添加任务</button>
    <div class="box">
        <h2>代办清单</h2>
        <div class="main">
            <div class="task">
                <p>吃饭</p>
                <button class="butns">完成</button>
                <button class="delete">删除</button>
            </div>
            <div class="task">
                <p>睡觉</p>
                <button class="butns">完成</button>
                <button class="delete">删除</button>
            </div>
            <div class="task">
                <p>敲代码</p>
                <button class="butns">完成</button>
                <button class="delete">删除</button>
            </div>
        </div>
    </div>
    <div class="todolist">
        <h2>已完成</h2>
        <div class="task-list"></div>
    </div>
    <script>
        let boxlist = document.querySelector(".box")
        // let deletelist = document.querySelectorAll(".delete")
        let todolists = document.querySelector(".todolist")
        let mainlist = document.querySelector(".main")
        let addi = document.querySelector("input")
        let addbtn = document.querySelector(".butnes")
        
        addbtn.onclick = function () {
            let text = addi.value;
            let btnslist = boxlist.querySelectorAll(".butns")
            let newNode = btnslist[0].parentNode.cloneNode(true)
            newNode.querySelector("p").innerText = text
            boxlist.appendChild(newNode);
            fn()
        }
        function fn() {
            let btnslist = boxlist.querySelectorAll(".butns")
            // console.log(btnslist);
            btnslist.forEach(function (button) {
                button.onclick = function () {
                    let parent = button.parentNode;
                    if (button.innerText == '完成') {
                        todolists.appendChild(parent)
                        button.innerText = '未完成'
                    } else {
                        mainlist.appendChild(parent)
                        button.innerText = '完成'
                    }
                }
            })
        }
        fn()
        function remove() {
            let deletelist = document.querySelectorAll(".delete")
            deletelist.forEach(function (button) {
                button.onclick = function () {
                    button.parentNode.remove();
                }
            })
        }
        remove()
    </script>
</body>

</html>